<!--vue项目中，.vue文件是个模块；导出模块-->
<template>
  <div class="hots">
    <header-nav>
      首页
    </header-nav>
    <!--热门直播页面-->
    <div class="roomlists">
      <!--{{rooms[0]}}-->
      <room-list v-for="room in rooms" :room="room">

      </room-list>
      <p class="refresh">
          <span class="fa fa-refresh  fa-spin"></span>
      </p>
    </div>

  </div>
</template>
<script>
//  导入导航组件,并设置为子组件
  import HeaderNav from '../components/HeaderNav'
  import RoomList from '../components/RoomList'
  export default{
      data:function(){
          return {
            status:'loading',
            rooms:[],
            isLoadingMore:false
          }
      },
    components:{
        HeaderNav,RoomList
    },
//    当实例创建的时候自动执行函数
    created:function(){
      this.$http.get('/douyuapi/api/RoomApi/live/')
        .then(function(res){
          console.log(res)
          if(res.body.error == 0 ){
            this.rooms = res.body.data
            this.status = 'success'
          } else {
              alert('获取数据失败')
          }
      })
//      鼠标滚动的时候，重新发送请求，获取新的数据
      window.onscroll = this.loadMore


    },
    methods:{
        loadMore:function(){
          //        获取body内容高度

          var contentHeight = document.body.clientHeight
//          console.log(contentHeight)
//        获取滚动偏移量
          var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
//        console.log(scrollTop)
//        窗口高度
          var windowH = window.innerHeight
//        console.log(windowH)
          if(scrollTop + windowH > contentHeight  ){
            console.log('重新获取数据')
            if( !this.isLoadingMore ){
              this.$http.get('/douyuapi/api/RoomApi/live', {
                params:{
                  offset:this.rooms.length / 30
                }
              }).then(function(res){
                console.log(res)

                this.rooms = this.rooms.concat(res.data.data)
                console.log(this.rooms.length)
                this.isLoadingMore = false
              })
            }
            this.isLoadingMore = true
          }



        }
    }



  }
</script>
<style scoped>
*{
  box-sizing: border-box;
}
  .roomlists{
    margin-top:45px; display:flex; flex-wrap:wrap; justify-content: center;
  }
  .refresh span{
    font-size:2.6rem;
  }
</style>
